<template>
  <div class="message-list">
    <div class="message-header">
      <h2>{{ title }}</h2>
      <div class="actions">
        <button @click="markAllRead" v-if="hasUnread">标记全部已读</button>
        <button @click="deleteAll">删除全部</button>
      </div>
    </div>

    <div class="message-content">
      <!-- 点赞消息 -->
      <div v-if="type === 'like'">
        <div
            v-for="like in messages"
            :key="like.likeId"
            class="message-card"
            :class="{ unread: !like.isRead }"
        >
          <div class="post-header">
            <img :src="like.likerAvatar" :alt="like.likerName" class="avatar">
            <div class="post-info">
              <div class="name">{{ like.likerName }}</div>
              <div class="time">{{ formatDate(like.likeTime) }}</div>
            </div>
            <div v-if="!like.isRead" class="unread-indicator"></div>
          </div>
          <div class="post-content">
            <p>点赞了你的帖子《{{ like.contentTitle }}》</p>
            <div class="post-preview">
              <div class="post-title">{{ like.contentTitle }}</div>
              <div class="like-count">
                <i class="fa fa-heart text-red-500"></i>
                <span>{{ like.likeCount || 0 }}</span>
              </div>
            </div>
          </div>
          <div class="message-actions">
            <button @click="markRead(like.likeId)" v-if="!like.isRead">标记已读</button>
            <button @click="deleteMessage(like.likeId)">删除</button>
          </div>
        </div>
      </div>

      <!-- 评论消息 -->
      <div v-if="type === 'comment'">
        <div
            v-for="comment in messages"
            :key="comment.commentId"
            class="message-card"
            :class="{ unread: !comment.isRead }"
        >
          <div class="post-header">
            <img :src="comment.commenterAvatar" :alt="comment.commenterName" class="avatar">
            <div class="post-info">
              <div class="name">{{ comment.commenterName }}</div>
              <div class="time">{{ formatDate(comment.commentTime) }}</div>
            </div>
            <div v-if="!comment.isRead" class="unread-indicator"></div>
          </div>
          <div class="post-content">
            <p>评论了你的帖子《{{ comment.contentTitle }}》: "{{ comment.commentText }}"</p>
            <div class="post-preview">
              <div class="post-title">{{ comment.contentTitle }}</div>
            </div>
          </div>
          <div class="message-actions">
            <button @click="markRead(comment.commentId)" v-if="!comment.isRead">标记已读</button>
            <button @click="deleteMessage(comment.commentId)">删除</button>
          </div>
        </div>
      </div>

      <!-- 关注消息 -->
      <div v-if="type === 'follow'">
        <div
            v-for="follow in messages"
            :key="follow.followId"
            class="message-card"
            :class="{ unread: !follow.isRead }"
        >
          <div class="post-header">
            <img :src="follow.followerAvatar" :alt="follow.followerName" class="avatar">
            <div class="post-info">
              <div class="name">{{ follow.followerName }}</div>
              <div class="time">{{ formatDate(follow.followTime) }}</div>
            </div>
            <div v-if="!follow.isRead" class="unread-indicator"></div>
          </div>
          <div class="post-content">
            <p>关注了你</p>
          </div>
          <div class="message-actions">
            <button @click="followBack(follow.followerId)" class="follow-btn">回关</button>
            <button @click="markRead(follow.followId)" v-if="!follow.isRead">标记已读</button>
            <button @click="deleteMessage(follow.followId)">删除</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    messages: Array,
    type: String
  },
  computed: {
    hasUnread() {
      return this.messages.some(msg => !msg.isRead);
    }
  },
  methods: {
    formatDate(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
    },
    markRead(messageId) {
      this.$emit('mark-read', messageId);
    },
    deleteMessage(messageId) {
      this.$emit('delete-message', messageId);
    },
    markAllRead() {
      this.$emit('mark-all-read');
    },
    deleteAll() {
      this.$emit('delete-all');
    },
    followBack(followerId) {
      this.$emit('follow-back', followerId);
    }
  }
};
</script>

<style scoped>
.message-list {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.message-header h2 {
  font-size: 1.5rem;
  color: #333;
}

.actions button {
  margin-left: 10px;
  padding: 6px 12px;
  background: #f0f2f5;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.actions button:hover {
  background: #e4e6eb;
}

.message-card {
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 8px;
  background: #fafafa;
  transition: transform 0.2s;
}

.message-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.message-card.unread {
  border-left: 3px solid #f97316;
  background: #fffaf0;
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
}

.post-info {
  flex: 1;
}

.name {
  font-weight: 600;
  margin-bottom: 4px;
}

.time {
  color: #999;
  font-size: 12px;
}

.unread-indicator {
  width: 8px;
  height: 8px;
  background: #f97316;
  border-radius: 50%;
  margin-left: 8px;
}

.post-content p {
  margin: 10px 0;
  color: #333;
}

.post-preview {
  display: flex;
  align-items: center;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
  margin-top: 8px;
}

.post-title {
  flex: 1;
  font-size: 14px;
  color: #555;
}

.like-count {
  display: flex;
  align-items: center;
  color: #f56c6c;
  font-weight: 500;
}

.message-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.message-actions button {
  padding: 5px 10px;
  background: #f0f2f5;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.message-actions button:hover {
  background: #e4e6eb;
}

.follow-btn {
  background: #409eff !important;
  color: white !important;
}

.follow-btn:hover {
  background: #66b1ff !important;
}
</style>